<style>
.popover-examples .popover
{
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 20px;
}
</style>

<section>
  <header><h3>静态类型</h3></header>
  <article>
    <div class="example popover-examples">
      <div class="popover top">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
      <div class="popover right">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover right</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
      <div class="popover bottom">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover bottom</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
      <div class="popover left">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover left</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <h4>不带箭头指示</h4>
    <div class="example popover-examples">
      <div class="popover">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </article>
</section>

<section>
  <header><h3>动态演示</h3></header>
  <article>
    <div class="example">
      <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="我是内容！" data-original-title="我时标题">打开弹出框</a>
    </div>
    <h4>在不同方向弹出</h4>
    <div class="example text-center">
      <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="我是内容。" data-original-title="我时标题" title="">左侧弹框</button>
      <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="我是内容。" data-original-title="我时标题" title="">上方弹框</button>
      <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="我是内容。" data-original-title="我时标题" title="">下方弹框</button>
      <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="我是内容。" data-original-title="我时标题" title="">右侧弹框</button>
    </div>
    <h4>指定html元素作为弹出内容</h4>
    <div class="example">
      <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="right" data-target="$next">打开弹出框</a>
      <div id="popoverContent1" class="popover">
        <h3 class="popover-title">Popover top</h3>
        <table class="table">
          <tr>
            <td>Lorem ipsum dolor.</td>
            <td>Nisi, ad, quisquam!</td>
            <td>Eum, excepturi, placeat.</td>
          </tr>
          <tr>
            <td>Lorem ipsum dolor.</td>
            <td>Explicabo, nobis, nesciunt!</td>
            <td>Sequi, doloribus, natus.</td>
          </tr>
          <tr>
            <td>Lorem ipsum dolor.</td>
            <td>Ipsum, suscipit, quibusdam?</td>
            <td>Minus, tenetur, neque.</td>
          </tr>
        </table>
      </div>
    </div>
  </article>
</section>

<section>
  <header><h3>用法</h3></header>
  <article>
    <p>通过JavaScript启用弹出框：</p>
    <div class="example">
      <pre><code>$(&#39;#example&#39;).popover(options)</code></pre>
    </div>

    <h4>使用要点</h4>
    <ul>
      <li>弹出框依赖 <a href="#javascript/tooltips">工具提示插件</a> ，因此需要先加载工具提示插件。</li>
      <li>出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong>。</li>
      <li>弹出框在按钮组和输入框组中使用时，需要额外的设置：当提示框与 <code>.btn-group</code> 或 <code>.input-group</code> 联合使用时，你需要指定 <code>container: &#39;body&#39;</code>选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。</li>
      <li>在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来：为了给 <code>disabled</code> 或 <code>.disabled</code> 元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个 <code>&lt;div&gt;</code> 中，然后对这个 <code>&lt;div&gt;</code> 元素应用弹出框。</li>
    </ul>
  </article>
</section>

<section>
  <header><h3>选项</h3></header>
  <article>
    <p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到<code>data-</code>之后，例如<code>data-animation=""</code>。</p>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 100px;">名称</th>
            <th style="width: 100px;">类型</th>
            <th style="width: 50px;">默认值</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>animation</td>
            <td>boolean</td>
            <td>true</td>
            <td>是否应用淡入淡出动画。</td>
          </tr>
          <tr>
            <td>html</td>
            <td>boolean</td>
            <td>false</td>
            <td>
              是否允许内容中包含html。
            </td>
          </tr>
          <tr>
            <td>placement</td>
            <td>string | function</td>
            <td>'right'</td>
            <td>
              top | bottom | left | right | auto.
              <br>
              显示位置
            </td>
          </tr>
          <tr>
            <td>selector</td>
            <td>string</td>
            <td>false</td>
            <td>
              当需要给动态的DOM元素应用工具提示时，需要手动制定选择器。
            </td>
          </tr>
          <tr>
            <td>trigger</td>
            <td>string</td>
            <td>'click'</td>
            <td>click | hover | focus | manual，决定交互方式。</td>
          </tr>
          <tr>
            <td>title</td>
            <td>string | function</td>
            <td>''</td>
            <td>
              标题
            </td>
          </tr>
          <tr>
            <td>content</td>
            <td>string | function</td>
            <td>''</td>
            <td>
              内容
            </td>
          </tr>
          <tr>
            <td>delay</td>
            <td>number | object</td>
            <td>0</td>
            <td>
              <p>
                是否延迟展示。
              </p>
              <p>
                <code>delay: { show: 500, hide: 100 }</code>
              </p>
            </td>
          </tr>
          <tr>
            <td>container</td>
            <td>string | false</td>
            <td>false</td>
            <td>
              <p>
                决定相对位置的父级容器。
              </p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- /.table-responsive -->
    <div>
      <h4>为单个弹出框应用data属性</h4>
      <p>对单个弹出框可以通过data属性单独指定选项，如上所示。</p>
    </div>
  </article>
</section>

<section>
  <header><h3>方法</h3></header>
  <article>
    <pre><code>$('#element').popover(options)</code></pre>
    <p>为一组元素初始化弹出框。</p>

    <h4>.popover('show')</h4>
    <p>显示弹出框。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).popover(&#39;show&#39;);</code></pre>
    </div>

    <h4>.popover('hide')</h4>
    <p>隐藏弹出框。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).popover(&#39;hide&#39;);</code></pre>
    </div>

    <h4>.popover('toggle')</h4>
    <p>展示或隐藏弹出框。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).popover(&#39;toggle&#39;);</code></pre>
    </div>

    <h4>.popover('destroy')</h4>
    <p>隐藏并销毁弹出框。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).popover(&#39;destroy&#39;);</code></pre>
    </div>
  </article>
</section>

<section>
  <header><h3>事件</h3></header>
  <article>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 150px;">事件类型</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>show.zui.popover</td>
            <td>
              当
              <code>show</code>
              方法被调用之后，此事件将被立即触发。
            </td>
          </tr>
          <tr>
            <td>shown.zui.popover</td>
            <td>当弹出框展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
          </tr>
          <tr>
            <td>hide.zui.popover</td>
            <td>
              当
              <code>hide</code>
              方法被调用之后，此事件被触发。
            </td>
          </tr>
          <tr>
            <td>hidden.zui.popover</td>
            <td>当弹出框被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="example">
      <pre><code class="language-js"></code></pre>
    </div>
  </article>
</section>

<script>
function afterPageLoad() {
    $('#pageContent [data-toggle="popover"]').popover();
}
</script>
